import React from 'react';
import { Card, Form, Button, Space } from 'antd';
import { CardProps } from 'antd/es/card';
import { FormProps, FormInstance } from 'antd/es/form';
import styles from './styles.module.css';

export interface FormCardProps extends Omit<CardProps, 'children' | 'actions'> {
  // 表单属性
  formProps?: FormProps;
  // 表单实例
  form?: FormInstance;
  // 提交按钮文本
  submitText?: string;
  // 取消按钮文本
  cancelText?: string;
  // 提交处理函数
  onFinish?: (values: any) => void;
  // 取消处理函数
  onCancel?: () => void;
  // 是否显示操作按钮
  showActions?: boolean;
  // 操作按钮位置
  actionsAlign?: 'left' | 'center' | 'right';
  // 自定义操作按钮
  actions?: React.ReactNode;
  // 表单内容
  children: React.ReactNode;
  // 是否加载中
  loading?: boolean;
}

/**
 * 统一的表单卡片组件
 * 用于所有表单页面，提供一致的布局和操作按钮
 * 支持自定义表单配置和操作行为
 */
const FormCard: React.FC<FormCardProps> = ({
  formProps,
  form,
  submitText = '提交',
  cancelText = '取消',
  onFinish,
  onCancel,
  showActions = true,
  actionsAlign = 'right',
  actions,
  children,
  loading = false,
  className,
  ...cardProps
}) => {
  const renderActions = () => {
    if (!showActions) return null;
    
    if (actions) {
      return (
        <div className={`${styles.formActions} ${styles[`actions_${actionsAlign}`]}`}>
          {actions}
        </div>
      );
    }
    
    return (
      <div className={`${styles.formActions} ${styles[`actions_${actionsAlign}`]}`}>
        <Space>
          {onCancel && (
            <Button onClick={onCancel}>
              {cancelText}
            </Button>
          )}
          <Button 
            type="primary" 
            htmlType="submit"
            loading={loading}
          >
            {submitText}
          </Button>
        </Space>
      </div>
    );
  };

  return (
    <Card
      {...cardProps}
      className={`${styles.formCard} ${className || ''}`}
    >
      <Form
        {...formProps}
        form={form}
        onFinish={onFinish}
        layout={formProps?.layout || 'vertical'}
        className={styles.form}
      >
        <div className={styles.formContent}>
          {children}
        </div>
        {renderActions()}
      </Form>
    </Card>
  );
};

export default FormCard; 